<template>
  <div class="time-range-selector">
    <el-date-picker
      v-model="startTime"
      type="datetime"
      placeholder="起始时间"
      style="width: 200px"
      value-format="timestamp"
    />
    <span> ~ </span>
    <el-date-picker
      v-model="endTime"
      type="datetime"
      placeholder="结束时间"
      style="width: 200px"
      value-format="timestamp"
    />
  </div>
</template>

<script>
import { timestampToUnix, unixToTimestamp } from '../../utils/datetime'

export default {
  name: 'DateTimePointPicker',

  props: {
    // 开始时间
    startValue: {
      type: [String, Number, Date]
    },

    // 结束时间
    endValue: {
      type: [String, Number, Date]
    }
  },

  computed: {
    // 开始时间
    startTime: {
      get() {
        return unixToTimestamp(this.startValue)
      },
      set(val) {
        this.$emit('update:startValue', timestampToUnix(val))
      }
    },

    // 结束时间
    endTime: {
      get() {
        return unixToTimestamp(this.endValue)
      },
      set(val) {
        this.$emit('update:endValue', timestampToUnix(val))
      }
    }
  }
}
</script>
